<template>
  <div style="background-color: #F5F5F5;width: 100%;height: 700px;">
    <div style="background-color: #F5F5F5;width: 100%;height: 20px;"></div>
    <div style="display: flex;justify-content: space-between;height: 30px;">
      <div style="margin-left: 10px;color: darkgrey;">频道切换</div>
      <div style="border: 0.0625rem solid darkgoldenrod;border-radius: 10px;width: 40px;font-size: 10px;color: darkgoldenrod;display: flex;align-items: center;justify-content: center;margin-right: 10px;height: 20px;">管理</div>
    </div>
    <div style="background-color: white;display: flex;flex-wrap: wrap;">
      <div style="width: 19%;height: 35px;margin: 10px;margin-top: 10px;display: flex;flex-direction: column;" v-for="(item,index) in listData" :key="index">
        <div style="font-size: 10px;width: 75px;height: 35px;border: 0.0625rem solid darkgray;display: flex;justify-content: center;align-items: center;">{{item}}</div>
      </div>
    </div>
    <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;">
      <van-image width="60" height="60" :src="require('@/assets/images/home/more-iner.png')" />
      <div style="margin-left: 5px;color: #BFBFBF;">更多推荐,敬请期待</div>
    </div>
    <div style="width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 20px;">
      <div style="background-color: red;width: 90%;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 22px;color: white;">查看全部</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
        banners: [],
        listData: ['健康','美食','卫生城市复审','医疗','养老','新闻早班车','经济','政务','国际新闻','头条','法律','科技','娱乐','汽车','+']
      }
  }
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>
